<template>
	<!-- 任务管理 -->
	<div class="taskExecuteManage">
		<!-- 头部 -->
		<div class="classTop">
			<div class="classTop_l">
				<CommonTitle titleName="当前任务量"> </CommonTitle>
				<div class="itemBox itemBox1">
					<div class="item">
						<div class="icon">
							<svg-icon icon-class="project-detail-icon-2" class="icon" />
						</div>
						<div class="parBox">
							<div class="parnum">{{ state.board.pendingTaskNum || 0 }}</div>
							<div class="parname">待配置</div>
						</div>
					</div>
					<div class="item">
						<div class="icon">
							<svg-icon icon-class="project-detail-icon-4" class="icon" />
						</div>
						<div class="parBox">
							<div class="parnum">{{ state.board.waitTaskNum  || 0}}</div>
							<div class="parname">未开始</div>
						</div>
					</div>
					<div class="item">
						<div class="icon">
							<svg-icon icon-class="project-detail-icon-7" class="icon" />
						</div>
						<div class="parBox">
							<div class="parnum">{{ state.board.progressTaskNum || 0 }}</div>
							<div class="parname">进行中</div>
						</div>
					</div>
					<div class="item">
						<div class="icon">
							<svg-icon icon-class="project-detail-icon-1" class="icon" />
						</div>
						<div class="parBox">
							<div class="parnum">{{ state.board.completedTaskNum || 0}}</div>
							<div class="parname">已完成</div>
						</div>
					</div>
				</div>
			</div>
			<div class="classTop_r">
				<div class="itemBox">
					<!-- <div class="itemBtn">
            <el-button @click="toPath('预设任务规划管理')"
              >预设任务规划管理</el-button
            >
          </div> -->

					<div class="itemBtn">
						<el-button @click="toPath('公共实施行为明细')" class="button_edit">公共实施行为明细</el-button>
					</div>
					<div class="itemBtn" @click.prevent="radioChange">
						<div>
							<div class="search-right-wrap">
								<div
									class="screen-button d-flex a-center j-center"
									:style="{
										'--screen-button-border-color':
											taskForm.isHideComplete == '1' ? '#fc7037' : '#CCCCCC',
									}"
								>
									<el-radio v-model="taskForm.isHideComplete" :label="'1'"
										>隐藏已完成任务</el-radio
									>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 表单 -->
		<div class="formBox">
			<el-form :inline="true" :model="taskForm" class="demo-form-inline">
				<el-form-item class="" label="搜索">
					<el-input
						v-model="taskForm.keywords"
						clearable
						placeholder="根据项目名称或编号搜索"
            style="width: 240px;"
					/>
				</el-form-item>
				<el-form-item label="任务类型">
					<el-select v-model="taskForm.taskType" clearable placeholder="请选择任务类型" style="width: 140px;">
						<el-option
							v-for="v in state.deptList"
							:key="v.value"
							:label="v.label"
							:value="v.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="任务状态">
					<el-select v-model="taskForm.status" clearable placeholder="请选择任务状态" style="width: 140px;">
						<el-option
							v-for="v in state.taskStatusOptions"
							:key="v.value"
							:label="v.label"
							:value="v.value"
						/>
					</el-select>
				</el-form-item>
				<el-button
					class="el_classbtn m-r10"
					color="#FF7B50"
					style="color: #fff"
					type="primary"
					@click="onQuery"
					>
          搜索
        </el-button>
				<el-button class="el_classbtn" style="" color="#F0F0F0" @click="onReset">
          重置
        </el-button>
			</el-form>
		</div>
		<tableIndex
			ref="tableIndexRef"
			:tableData="state.tableData"
			:tableHead="tableHead"
			:isIndex="true"
			:notSearch="true"
			:isSelection="true"
			:isRadio="false"
			:fields="fields"
			:height="500"
			:page="page"
			@searchList="searchList"
			@page-change="pageChange"
		>
			<template #operate>
				<el-table-column label="操作" width="250" align="center" fixed="right">
					<template #default="{ row }">
						<el-button
							style=""
							color="#F0F0F0"
							size="small"
							@click="toPath('edit', row)"
							>配置节点</el-button
						>
						<el-button
							class="button_view"
							size="small"
							@click="toPath('view', row)"
							type="primary"
							>任务执行</el-button
						>
						<el-button
								v-if="row.isDark===1 && row.totalItemNum > 0 && (row.totalItemNum===row.completeItemNum)"
								@click="onSynchronous(row)"
								class="button_view"
								size="small"
								type="primary"
						>同步</el-button
						>
						<el-button
							  v-if="row.isDark===0"
								class="button_view"
								size="small"
								type="primary"
						>详情</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableIndex>
	</div>

	<synchronous-popup ref="synchronousPopupRef" @onSuccess="()=>{getPageList();getBoard();}"></synchronous-popup>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import TableIndex from "@/components/table/index.vue";
import { ref, reactive, watch, onMounted } from "vue";
import {
	ElInput,
	ElSelect,
	ElOption,
	ElRadio,
	ElForm,
} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import { useStore } from "vuex";
import {darkLine, projectTaskApi} from "@/api/project";
import { processApi } from "@/api/biddingProject";
import {
	nodeStatusOptions,
	competitiveBiddingStatusOptions,
} from "@/common/dict/dictCollect";

import SynchronousPopup from "./components/synchronousPopup.vue";
import {getURLhandler} from "@/common/utils/GlobalUtils";

const store = useStore();
const router = useRouter();
const route = useRoute();
const tableHead = reactive([
	{
		// -2待配置-1未完成0进行中1完成
		prop: "status",
		label: "任务状态",
		formatter: (row) => {
			let str = "";
			switch (row.status) {
				case -2:
					str = "待配置";
					break;
				case -1:
					str = "未开始";
					break;
				case 0:
					str = "进行中";
					break;
				case 1:
					str = "完成";
					break;

				default:
					break;
			}
			return str;
		},
	},
	{
		prop: "relateTaskName",
		label: "关联任务",
		width: 120,
	},
	{
		prop: "projectStageName",
		label: "所属阶段",
		width: 120,
	},
	{
		prop: "taskName",
    label: "项目任务名称",
    width: 120,
	},
	{
		prop: "projectTaskId",
		label: "任务编号",
	},
	{
		prop: "taskType",
		label: "任务类型",
		formatter: (row) => {
			let str = "";
			switch (row.taskType) {
				case 1:
					str = "部门专属";
					break;

				default:
					str = "公共";
					break;
			}
			return str;
		},
	},
	{
		prop: "taskNum",
		label: "任务量",
		formatter: (row) => {
			let str = `${row.completeItemNum}/${row.totalItemNum}`;
			return str;
		},
	},
	{
		prop: "planStartTime",
    label: "计划开始日期",
    width: 120,
	},
	{
		prop: "planEndTime",
    label: "计划完成日期",
    width: 120,
	},
	{
		prop: "realEndTime",
		label: "实际完成日期",
    width: 120,
	},
]);
const taskForm = reactive({
	keywords: "",
	isHideComplete: "",
	taskType: "",
	status: "",
});

const page = reactive({
	total: 0,
	current: 1,
	size: 50,
});

const tableOption = ref([
	{ label: "任务执行状态", prop: "taskStatus", slot: true },
	{ label: "招标项目任务 ", prop: "taskName" },
	{ label: "任务编号 ", prop: "tenderTaskId" },
	{ label: "任务来源部门 ", prop: "deptName" },
	{ label: "招标项目类别 ", prop: "projectTypeExplain", slot: true },
	{ label: "招标（比选）方式 ", prop: "tenderTypeExplain", slot: true },
	{
		label: "控制价",
		prop: "tenderAmount",
		formatter: (val) => {
			return val + " 元";
		},
	},
	{
		label: "任务量",
		prop: "totalFlowNum",
		formatter: (val, row) => {
			return row.completeFlowNum + "/" + row.totalFlowNum;
		},
	},
	{ label: "当前节点 ", prop: "currentFlowNodeName" },
	{ label: "任务创建日期 ", prop: "createTime" },
	{ label: "实际完成日期", prop: "realEndTime" },
	{ label: "操作", prop: "operation", slot: true, width: 200 },
]);

const state = reactive({
	tableData: [],
	board: {},
	deptList: [
		{
			label: "全部",
			value: "",
		},
		{
			label: "部门专属",
			value: "1",
		},
		{
			label: "公共",
			value: "2",
		},
	],
	taskStatusOptions: [
		{
			label: "全部",
			value: "",
		},
		{
			label: "待配置",
			value: "-2",
		},
		{
			label: "未开始",
			value: "-1",
		},
		{
			label: "进行中",
			value: "0",
		},
		{
			label: "完成",
			value: "1",
		},
	],
});

const radioChange = (e) => {
	if (taskForm.isHideComplete) {
		taskForm.isHideComplete = "";
	} else {
		taskForm.isHideComplete = "1";
	}

	getPageList();
};

// 根据搜索条件查询
const onQuery = () => {
	getPageList();
};

// 重置
const onReset = () => {
	for (let key in taskForm) {
		if (typeof taskForm[key] === "string") {
			taskForm[key] = "";
		}
		if (typeof taskForm[key] === "number") {
			taskForm[key] = 0;
		}
	}
	page.current = 1;
	page.size = 10;
	getPageList();
};
const getBoard = () => {
	darkLine.boardLook().then((res) => {
		if (res.code === '200') {
			state.board = res.data || [];
		}
	});
};
let tableIndexRef = ref(null);

const getPageList = () => {
	darkLine
		.getTaskPage({
			pageNum: page.current,
			pageSize: page.size,
			param: {
				...taskForm,
				isDark:1,
				projectId:getURLhandler(route.path).id
			},
		})
		.then((res) => {
			if (res.code === '200') {
				state.tableData = res.data.content;
				page.total = res.data.totalSize;
			}
		});
};

const onPageChange = (e) => {
	page.current = e.page;
	page.size = e.limit;
	let param = {
		param: {
			queryName: "",
		},
		pageNum: page.current,
		pageSize: page.size,
	};
	getPageList();
};

// 跳转 任务配置
const toPath = (key, row) => {
	switch (key) {
		case "edit": // 配置节点
			router.push(
				`/constructionProjectManage/projectImplementationTask/nodeconfig/projectTaskId=${row.projectTaskId}&isDark=${row.isDark}`
			);
			break;
		case "view": // 任务执行
			router.push({
				path: `/constructionProjectManage/projectImplementationTask/taskExecution2/projectTaskId=${row.projectTaskId}`,
			});
			break;
		case "公共实施行为明细":
			router.push(`/constructionProjectManage/projectBusiness/nodeImplement`);
			break;
		case "流程节点管理":
			router.push("/tender/taskManage/processNodeManagement");
			break;
		case "预设任务规划管理":
			router.push(
				`/constructionProjectManage/ProjectImplementationTask/presetProject`
			);
			break;
		case "待审批":
			router.push({
				path: "/tender/collaborativeApprovalManagement/index",
				query: {
					statusType: "1",
				},
			});
			break;
		case "被驳回":
			router.push({
				path: "/tender/collaborativeApprovalManagement/index",
				query: {
					statusType: "3",
				},
			});
			break;

		default:
			break;
	}
};

const synchronousPopupRef = ref(null);

/**
 * 同步
 */
const onSynchronous = (row) => {
	synchronousPopupRef.value.openPopup(row.projectIsDark,row.projectTaskId);
}

onMounted(() => {
	getPageList(); //获取分页
	getBoard(); //获取看板
});
</script>

<style lang="scss" scoped>
.el-form .el-form-item {
	width: auto !important;
}
.taskExecuteManage {
	.classTop {
		display: flex;

		.classTop_l {
			width: 45%;
		}

		.itemBox {
			display: flex;
		}

		.itemBox1 {
			display: flex;
			justify-content: space-between;
			// padding-right: 10%;
		}

		.item {
			width: 0.7813rem;
			height: 0.3125rem;
			padding: 0.0833rem;
			display: flex;
			border-radius: 0.026rem;
			box-shadow: 0 0.0104rem 0.0625rem 0 rgba(0, 0, 0, 0.1);
			margin-right: 0.1042rem;
      cursor: pointer;
			.icon {
				width: 0.125rem;
				height: 0.125rem;
			}

			.parBox {
				margin-left: 0.0521rem;

				.parnum {
					font-size: 0.0729rem;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #1a1a1a;
					line-height: 0.0833rem;
				}

				.parname {
					font-size: 0.0625rem;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #999999;
					line-height: 0.0833rem;
				}
			}
		}

		.classTop_r {
			width: 55%;
			padding-top: 4%;
			.itemBtn {
				padding: 0rem 0.0521rem;
				margin-top: 0.0313rem;
			}
		}
	}

	.formBox {
		margin-top: 0.1875rem;
		margin-bottom: 0.1458rem;

		.el-form {
			.el-form-item {
				margin-bottom: 0.0521rem;
				// :deep(.el-input) {
				//   width: 1.3021rem;
				// }
				// :deep(.el-select .el-input) {
				//   width: 0.7292rem;
				// }
			}
			.formBox_top_input {
				:deep(.el-form-item__content) {
					width: 120px;
				}
			}

			.assetInputBtn {
				&:hover {
					background-color: #fff;
					color: $btn-defualt-tx-color;
				}

				.addAssetBtnImg {
					width: 0.0938rem;
					height: 0.0938rem;
				}
			}
		}

		.searchDivider {
			height: 0.2083rem;
			margin: 0 0.1563rem;
		}
	}
}

.el_classbtn {
	margin-top: -0.0521rem;
}

.radio_ {
	display: flex;
	justify-content: right;
	margin: 0.1042rem 0.1042rem 0 0;
}
.search-right-wrap {
	.screen-button {
		width: 0.7813rem;
		height: 0.2083rem;
		border-radius: 0.1042rem;
		border: 0.0052rem solid var(--screen-button-border-color);
	}
}
</style>
